<template>
  <component :is="props.tag"
  :style="{...styleProps, cursor: doubleContent && contenteditable ? 'text' : 'pointer',
    userSelect: doubleContent && contenteditable ? 'auto': 'none'}"
  class="z-text-component" @click="handleClick()"
    @dblclick.stop="handleDoubleClick()"
    v-html="textInnerHTML" :id="uId"
    :contenteditable="doubleContent && contenteditable">
  </component>
</template>

<script lang="ts" setup >
import { nextTick, ref, watch } from 'vue';
import useComponentCommon, { handleProps } from '../../hooks/useComponentCommon'
import { textStylePropNames, textDefaultProps, TextComponentProps } from '../../defaultProps'

interface Props {
  tag: string,
  uId: string,
  contenteditable? : boolean
}

const props = withDefaults(defineProps<Partial<Props & TextComponentProps>>(), {
  tag: 'div',
  contenteditable: true,
})

const textInnerHTML = ref<string>(props.text as string)


const selection = window.getSelection()
const doubleContent = ref<boolean>(false)
const handleDoubleClick = () => {
  // console.log("双击")
  doubleContent.value = true
  // name.value = 'mousedown.stop'
  const zText =document.getElementById(`${props.uId}`) as HTMLElement
  console.log(`${props.uId}`, document.getElementById(`${props.uId}`))
  if (zText) {
    const handleMousedown = (e: MouseEvent) => {
      e.stopPropagation()
    }

    const handleBlur = () => {
      // 因为失去焦点时，选区还有值，所以需要延迟一下
      setTimeout(() => {
        console.log(3333, '失去焦点', selection?.toString())
        if (selection?.toString().length === 0) {
          // console.log('选区为空')
          doubleContent.value = false
          zText.removeEventListener('mousedown', handleMousedown)
        }
      })
    }

    // 监听鼠标按下事件
    zText.addEventListener('mousedown', handleMousedown)
    // 监听释放鼠标事件
    // span.addEventListener("mouseup", handleMouseup)
    zText.addEventListener("blur", handleBlur)
  }
  
}


const newProps = handleProps<Partial<Props & TextComponentProps>, TextComponentProps>(props, textDefaultProps)
let { styleProps, handleClick } = useComponentCommon(newProps, textStylePropNames)

watch(props, (value) => {
  const newProps = handleProps<Partial<Props & TextComponentProps>, TextComponentProps>(props, textDefaultProps)
  styleProps.value = useComponentCommon(newProps, textStylePropNames).styleProps.value
  handleClick = useComponentCommon(newProps, textStylePropNames).handleClick
})

// console.log(2222, newProps)

// 第二种写法
// import { defineComponent, computed } from 'vue';
// import { pick } from 'lodash-es'
// import { textDefaultProps, transformToComponentProps, textStylePropNames } from '../defaultProps'

// const defaultProps = transformToComponentProps(textDefaultProps)

// export default defineComponent({
//   name: 'z-text',
//   props: {
//     tag: {
//       type: String,
//       default: 'div'
//     },
//     ...defaultProps
//   },
//   setup(props) {
//     const styleProps = computed(() => pick(props, textStylePropNames))
//     return {
//       styleProps
//     }
//   }
// })


</script>

<style lang="scss">
 /* 去掉input聚焦时候的外边框 */
[contenteditable]:focus {
    outline: none;
}
.z-text-component {
  position: static !important;
  box-sizing: border-box;
  width: 100% !important;
  height: 100% !important;
}
</style>